/* 
高频DOM事件 会引发页面的高频重绘
其一：页面刷新频率过高 形成抖动 给用户造成视觉疲劳
其二：浏览反复重绘 消耗性能
*/

const inputHandler = function (e) {
  console.log(e.target);
  console.log(e.target.value);
};

ip.addEventListener(
  "input",

  // 没有防抖处理
  // inputHandler,

  // 使用Lodash防抖
  // _.debounce(inputHandler,1000)

  // 自定义防抖函数
  mydebounce(inputHandler, 1000)
);

/* 自定义防抖高阶函数 */
function mydebounce(fn, delay) {
  // 将函数延时执行定时器放在闭包里
  let timer = null;

  return function (...args) {
    // 如果上一次函数调用还未执行（两次函数调用的时间间隔尚未达到1秒钟）
    // 就清除上一次的调用定时器
    if (timer) {
      clearTimeout(timer);
    }

    // 准备1秒钟后执行本次调用
    timer = setTimeout(() => {
      // fn(...args)
      fn.apply(null, args);

      // 执行完毕以后给一个标记
      timer = null;
    }, delay);

  };
}
